<template>
  <div class="front shopImgs">
    <div class="banner"
      :style="{backgroundImage:`url(${shopInfo.shopBackendImage?shopInfo.shopBackendImage:require('@/assets/front-img/shop/banner.png')})`}">
    </div>
    <div class="docWidth warpper">
      <div class="bigTitle">店铺相册</div>
      <ul>
        <li v-for="(item,index) in shopImgs" :key="index" :title="item.name || ''">
          <el-image style="width: 220px; height: 220px" :src="item.image" :preview-src-list="[item.image]"></el-image>
        </li>
      </ul>
    </div>
    <!-- <div class="docWidth warpper">
      <div class="bigTitle">店铺公司图</div>
      <ul>
        <li v-for="(item,index) in productImgs" :key="index" :title="item.name || ''">
          <el-image style="width: 220px; height: 220px" :src="item.image" :preview-src-list="[item.image]"></el-image>
        </li>
      </ul>
    </div> -->
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import { shopItemListByQo } from "@/api/front-home";
export default {
  name: 'FrontShopImgs',
  data() {
    return {
      productImgs: [],
      shopImgs: [],
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
    ...mapState({
      shopId: state => state.front.shopId,
      shopInfo: state => state.front.shopInfo,
    })
  },
  created() {
    const shopId = this.$route.query && this.$route.query.id && Number(this.$route.query.id)
    if (this.$store.state.front.shopId !== shopId) {
      this.$store.commit("front/SET_SHOPID", shopId)
      this.$store.dispatch('front/getShopInfo', shopId)
    }
    // this.shopItemListByQo(shopId, 3)
    this.shopItemListByQo(shopId, 2)
  },
  methods: {
    shopItemListByQo(id, type) {
      shopItemListByQo({ id: id, type: type }).then((res) => {
        const data = res || []
        if (type === 3) {
          this.productImgs = data
        } else {
          this.shopImgs = data
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.shopImgs {
  .banner {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 328px;
  }
  .bigTitle {
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    line-height: 38px;
    padding: 0 25px;
    background: #965f29;
  }
  .warpper {
    margin: 30px auto 0;
    ul {
      padding: 20px 0;
      margin-left: -25px;
      overflow: hidden;
      li {
        float: left;
        margin-left: 25px;
        margin-bottom: 25px;
        width: 220px;
      }
    }
  }
}
</style>